
// 模拟封装jquery中的ajax方法

var $ = {
    // { type = "get", url, data = "", async = true, dataType = "text", success }
    // type 请求方式 (get/post) 
    // url  请求地址 
    // data 请求携带的数据 (string|object),
    // async 是否异步      (默认true)
    // dataType 接口返回的数据类型  (text(默认)/html/json)
    // success 请求成功时的回调函数  function(result){}  result 形式参数 接收接口返回的数据   
    ajax: function (options) { // 接收一个对象作为参数  {url,data,async,dataType,success}

        var { type = "get", url, data = "", async = true, dataType = "text", success } = options;

        if (data instanceof Object) { // 如果数据是一个对象  遍历对象 拼接成字符串
            var str = "";
            for (var key in data) {
                console.log(key, data[key]);
                str += key + "=" + data[key] + "&";
            }
            data = str.substring(0, str.length - 1);
            // console.log(data);
        }
        var xhr = new XMLHttpRequest();
        if (type == "get") {
            //  data ? url + "?" + data : url  有数据就拼接  没有数据直接请求url
            xhr.open("get", data ? url + "?" + data : url, async);
            xhr.send();
        } else if (type == "post") {
            xhr.open("post", url, async);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }


        xhr.onreadystatechange = function () {
            // debugger;
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 接口返回数据 (文本 html json)
                var result = xhr.responseText; //响应文本

                if (dataType == "json") {
                    result = JSON.parse(xhr.responseText);
                }
                if (success) { // 请求成功时执行的回调函数
                    success(result);  // 把接口返回的数据作为实际参数
                }
            }
        }
    },
    // 多参数传参,一一对应
    get: function (options) { // 接收一个对象作为参数  {url,data,async,dataType,success}

        var { url, data = "", async = true, dataType = "text", success } = options;

        if (data instanceof Object) { // 如果数据是一个对象  遍历对象 拼接成字符串
            var str = "";
            for (var key in data) {
                console.log(key, data[key]);
                str += key + "=" + data[key] + "&";
            }
            data = str.substring(0, str.length - 1);
            console.log(data);
        }

        var xhr = new XMLHttpRequest();
        //  data ? url + "?" + data : url  有数据就拼接  没有数据直接请求url
        xhr.open("get", data ? url + "?" + data : url, async);
        xhr.send();
        xhr.onreadystatechange = function () {
            // debugger;
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 接口返回数据 (文本 html json)
                var result = xhr.responseText; //响应文本

                if (dataType == "json") {
                    result = JSON.parse(xhr.responseText);
                }
                // console.log(result);


                if (success) { // 请求成功时执行的回调函数
                    success(result);  // 把接口返回的数据作为实际参数
                }



            }
        }
    },
    post: function (options) { // 接收一个对象作为参数  {url,data,async,dataType,success}

        var { url, data = "", async = true, dataType = "text", success } = options;

        if (data instanceof Object) { // 如果数据是一个对象  遍历对象 拼接成字符串
            var str = "";
            for (var key in data) {
                console.log(key, data[key]);
                str += key + "=" + data[key] + "&";
            }
            data = str.substring(0, str.length - 1);
            console.log(data);
        }

        var xhr = new XMLHttpRequest();
        //  data ? url + "?" + data : url  有数据就拼接  没有数据直接请求url
        xhr.open("post", url, async);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);

        xhr.onreadystatechange = function () {
            // debugger;
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 接口返回数据 (文本 html json)
                var result = xhr.responseText; //响应文本

                if (dataType == "json") {
                    result = JSON.parse(xhr.responseText);
                }
                // console.log(result);
                if (success) { // 请求成功时执行的回调函数
                    success(result);  // 把接口返回的数据作为实际参数
                }

            }
        }
    }
}

// $.ajax({});
// $.get({});
// $.post();

